<template>
  <div class="total">
    <div class="logo" style="padding-top: 3em;padding-bottom: 2em"><img src="../assets/logo1.png" alt="logo" /></div>
    <div class="wrap">
      <div class="search_form">
        <el-input placeholder="请输入查询的天气" style="max-width: 40em;margin-top: 1.3em" v-model="city" @change="searchWeather">
          <el-button slot="append" style="background-color: aqua" icon="el-icon-search" @click="searchWeather"></el-button>
        </el-input>
        <div class="hotkey">
          <el-tag @click="change('北京')" class="m-tag" size="huge">北京</el-tag>
          <el-tag type="success" @click="change('上海')" class="m-tag">上海</el-tag>
          <el-tag type="info" @click="change('广州')" class="m-tag">广州</el-tag>
          <el-tag type="warning" @click="change('深圳')" class="m-tag">深圳</el-tag>
        </div>
      </div>
      <ul class="weather_list">
        <li v-for="item in weatherList">
          <div class="info_type">
            <span class="iconfont">{{item.type}}</span>
          </div>
          <div class="info_temp">
            <b>{{item.low}}</b>
            ~
            <b>{{item.high}}</b>
          </div>
          <div class="info_date"><span>{{item.date}}</span></div>

        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Forecast",
  data() {
    return {
      city: "",
      weatherList:[],
    }
  },
  methods: {
    searchWeather: function() {
      //console.log("天气查询");
      //console.log(this.city);
      // 调用接口
      this.$axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.city)
          .then(response=>{
            //console.log(response.data.data.forecast);
            this.weatherList = response.data.data.forecast;
          }).catch(error=>{
        console.log(error);
      })
    },
    change(city) {
      this.city = city;
      this.searchWeather();
    }
  }
}
</script>

<style scoped>
.logo{
  margin: 5px auto;
  text-align: center;
}
.weather_list{
  margin: 20px auto;
  text-align: center;
  list-style-type: none;
  border: 1px peachpuff solid;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
li{
  float: left;
  padding-right: 22px;
  padding-left: 30px;
  background: url(../assets/line.png) right center no-repeat;
}

.info_type{
  margin-top: 10px;
  color: rgb(236, 141, 16);
  font-size: 30px;
}
.info_temp{
  margin-top: 10px;
  color: rgb(238, 144, 20);
  font-size: 10px;
}
.info_date{
  margin-top: 10px;
  color: rgb(240, 143, 17);
  font-size: 15px;
}
.m-tag{
  cursor: pointer;
  margin: 0 auto;
  text-align: center;
  margin-top: 1em;
}

.wrap{
  max-width: 70em;
  margin: 0 auto;
  text-align: center;
  border: 1px hotpink solid;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>